<div class="shrink-0 flex flex-col h-full rounded-t-xl bg-components-card-bg">
  <div class="shrink-0 pl-8 pr-6 pt-6 pb-3 text-xl rounded-t-xl leading-[30px] font-semibold cursor-pointer z-10"
    cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    {{ 'PAC.Xpert.CreateBlankXpert' | translate: {Default: 'Create blank Xpert'} }}
  </div>
</div>
<div class="py-2 px-8">
  <div class="py-2 text-sm leading-[20px] font-medium">
    {{ 'PAC.Xpert.ChooseXpertType' | translate: {Default: 'What type of Xpert do you want?'} }}
  </div>
  <ul class="xpert-type-list flex gap-4" cdkListbox [(ngModel)]="types">
    <li
      [cdkOption]="eXpertTypeEnum.Agent"
    >
      <svg
        width="13"
        height="12"
        viewBox="0 0 13 12"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        class="w-6 h-6 text-[#1570EF]"
      >
        <g id="chat-bot">
          <path
            id="Vector"
            d="M4.20913 2.76912L4.09542 2.83543L3.98172 2.76912C3.90566 2.72476 3.86328 2.64979 3.86328 2.57101C3.86328 2.44347 3.96789 2.33887 4.09542 2.33887C4.22296 2.33887 4.32757 2.44347 4.32757 2.57101C4.32757 2.64979 4.28519 2.72476 4.20913 2.76912Z"
            fill="currentColor"
            stroke="currentColor"
            stroke-width="1.25"
          ></path>
          <path
            id="Vector_2"
            d="M10.0174 6.00058C10.0123 5.98686 10.0097 5.97229 10.0046 5.95858C9.81684 5.48158 9.35398 5.14258 8.81056 5.14258H8.66784L7.52484 5.99972C7.33713 6.14029 7.11556 6.21444 6.88284 6.21444C6.29184 6.21444 5.81056 5.73358 5.81056 5.14258H2.81013C2.10127 5.14258 1.52441 5.71944 1.52441 6.42829V9.85686C1.52441 10.5657 2.10127 11.1426 2.81013 11.1426H8.81013C9.51899 11.1426 10.0958 10.5657 10.0958 9.85686V6.42829C10.0958 6.34386 10.0868 6.26158 10.071 6.18186C10.0586 6.11886 10.0384 6.05972 10.0174 6.00058ZM3.88156 8.57115C3.52713 8.57115 3.2387 8.28272 3.2387 7.92829C3.2387 7.57386 3.52713 7.28544 3.88156 7.28544C4.23599 7.28544 4.52441 7.57386 4.52441 7.92829C4.52441 8.28272 4.23599 8.57115 3.88156 8.57115ZM7.7387 8.57115C7.38427 8.57115 7.09584 8.28272 7.09584 7.92829C7.09584 7.57386 7.38427 7.28544 7.7387 7.28544C8.09313 7.28544 8.38156 7.57386 8.38156 7.92829C8.38156 8.28272 8.09313 8.57115 7.7387 8.57115Z"
            fill="currentColor"
          ></path>
          <path
            id="Vector_3"
            d="M6.66699 5.14314V1.71456C6.66699 1.24099 7.05056 0.857422 7.52413 0.857422H10.9527C11.4263 0.857422 11.8098 1.24099 11.8098 1.71456V3.42885C11.8098 3.90242 11.4263 4.28599 10.9527 4.28599H8.38128L7.00985 5.31456C6.86842 5.42042 6.66699 5.31971 6.66699 5.14314Z"
            fill="currentColor"
          ></path>
        </g>
      </svg>
      <div class="h-5 text-[13px] font-medium leading-[18px]">
        {{ 'PAC.Xpert.Agent' | translate: {Default: 'Agent'} }}
      </div>
    </li>

    <li
      [cdkOption]="eXpertTypeEnum.Copilot"
    >
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        class="w-6 h-6 text-indigo-600"
      >
        <g id="cute-robot">
          <path
            id="Icon"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12 1C12.5523 1 13 1.44772 13 2V3H17C18.6569 3 20 4.34315 20 6V11C20 11.8885 19.6138 12.6868 19 13.2361V14.5858L20.7071 16.2929C21.0976 16.6834 21.0976 17.3166 20.7071 17.7071C20.3166 18.0976 19.6834 18.0976 19.2929 17.7071L18.681 17.0952C17.7905 19.9377 15.1361 22 12 22C8.8639 22 6.20948 19.9377 5.31897 17.0952L4.70711 17.7071C4.31658 18.0976 3.68342 18.0976 3.29289 17.7071C2.90237 17.3166 2.90237 16.6834 3.29289 16.2929L5 14.5858V13.2361C4.38625 12.6868 4 11.8885 4 11V6C4 4.34315 5.34315 3 7 3H11V2C11 1.44772 11.4477 1 12 1ZM7 5C6.44772 5 6 5.44772 6 6V11C6 11.5523 6.44772 12 7 12H17C17.5523 12 18 11.5523 18 11V6C18 5.44772 17.5523 5 17 5H7ZM9 7C9.55228 7 10 7.44772 10 8V9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9V8C8 7.44772 8.44772 7 9 7ZM15 7C15.5523 7 16 7.44772 16 8V9C16 9.55228 15.5523 10 15 10C14.4477 10 14 9.55228 14 9V8C14 7.44772 14.4477 7 15 7Z"
            fill="currentColor"
          ></path>
        </g>
      </svg>
      <div class="h-5 text-[13px] font-medium leading-[18px]">
        {{ 'PAC.Xpert.Copilot' | translate: {Default: 'Copilot'} }}
      </div>
    </li>
  </ul>
</div>

<div class="px-8">
  <xpert-basic-form #basicForm [(name)]="name" [(avatar)]="avatar" [(description)]="description" />
</div>

<div class="flex justify-end p-4">
  <div ngmButtonGroup>
    <button mat-flat-button (click)="close()">
      {{ 'PAC.ACTIONS.CANCEL' | translate: { Default: 'Cancel' } }}
    </button>
    <button mat-raised-button color="accent" cdkFocusInitial
      [disabled]="basicForm.checking() || basicForm.invalid()"
      (click)="create()">
      <span>
        {{ 'Story.Common.Save' | translate: { Default: 'Save' } }}
      </span>
    </button>
  </div>
</div>

<div class="absolute right-5 top-5 p-2 cursor-pointer z-20 danger" (click)="close()">
  <i class="ri-close-line text-text-secondary"></i>
</div>
